<!DOCTYPE html>
<html lang="en">

<head>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
  </script>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>


  <style>
    .highlight {
      color: #dd1144;
      background-color: #ffd351;
    }

  </style>
</head>

<body>
  <div id='test'>

    <h1>hahahhaha</h1>

    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
    </ul>

    <form action="#" id='form' name='shiguiwu'>
      <label for="username"></label><input type="text" id='username' /><br>
      <label for="password"></label><input type="password" name="password" id="password" /><br>
      <label for="male"></label><input type="radio" name="sex" id="male" />
      <label for="fale"></label><input type="radio" name="sex" id="fale" /><br>
      <label for="sex1"></label><input type="checkbox" name="sexs" id="sex1" />
      <label for="sex2"></label><input type="checkbox" name="sexs" id="sex2" /><br>
      <label for="select"></label>
      <select name="select" id="select">
        <option value="1">足球</option>
        <option value="2">蓝球</option>
        <option value="3">混球</option>
        <option value="4">非球</option>
      </select>




    </form>

    <div id='file1'></div>

    <div>
      <label for="file"></label>
      <input type="file" name="file" id="file">
    </div>

    <div id='file2'>
      <form action="" name="zhoudongxiu">
        <input type="date" name="date" id="date">

      </form>

    </div>


    <div id='j-test'>

      <ul class="student">
        <li class="da">大学生</li>
        <li class="yo">幼儿园</li>
        <li class="xia">小学生</li>
        <li class="chu">初中生</li>
        <li class="zh">中学生</li>
        <li class="zh" name='shiguiwu' title="haha">shiguiwu</li>
      </ul>

    </div>

  </div>

  <div style="display: none;"> 我是隐身</div>
</body>

<script>
  const d = document.getElementById('test')
  // console.log(d)

  const d1 = d.getElementsByTagName('ul')

  // const shi = document.createElement('li')
  // shi.id='shiguiwu'
  // shi.innerText='shiguiwu'

  // console.log(d1[0].appendChild(shi))

  const d2 = d1[0].getElementsByTagName('li')
  // console.log(d2)

  const ar = []

  // const arr = ar.map(e => e*e)
  for (let li of d2) {
    // console.log(li)
    ar.push(li.innerText)
  }

  // console.log(ar.join(','))

  const li = d2[0]
  const li1 = document.createElement('li')
  li1.id = 's'
  li1.innerText = '我的吗啊'
  d1[0].insertBefore(li1, li)


  const map = new Map([
    [2, '石贵武'],
    [3, '周冬秀'],
    [22, '是国务']
  ])

  // console.log(map.get(2))

  const arr = [2, 3, 4, 5]

  const set2 = new Set(...[arr])

  function P(age) {
    this.age = age
  }
  const ap = [
    new P(1),
    new P(1100),
    new P(11),
    new P(14),
    new P(11),
    new P(188)
  ]

  ap.sort((x, y) => x.age - y.age)
  ap.every(x => x.age > 100)
  ap.find(x => x.age === 11)
  ap.findIndex(x => x.age > 100)

  function counter(init = 0) {
    var x = init
    return {
      icr: function () {
        x += 1
        return x
      }
    }
  }

  const date = Date.now();

  const reg = /abc\-010/
  const reg1 = new RegExp('/abc\-110/')

  function Student(name, age) {

    this.age = age
    this.name = name

    // this.hello = function () {
    //   console.log(this.name + 'say  hello');

    // }
  }

  Student.prototype.hello = function () {
    console.log(this.name + 'say hello');
  }

  Student.prototype.study = function () {
    console.log(this.name + 'study')

  }

  function createStudent(props) {
    return new Student(props || {})
  }


  const q1 = $('ul.student li.da')

  const q2 = $('#j-test li.da')

  console.log('------------------------------------------------')

  console.log(q1 === q2);

  const q3 = $('ul.student li')

  const q4 = $('form[name="shiguiwu"] input')

  const q5 = $('ul.student > li.chu')

  const q6 = $('ul.student li.chu')

  const q7 = $('ul.student li:first-child')

  const q8 = $('ul.student li:last-child')

  const q9 = $('form[name="shiguiwu"]:input')

  const q10 = $('form[name="shiguiwu"]:radio')

  const q11 = $('form:input')

  const q12 = $('form:radio')

  const q13 = $('div:hidden')

  const q14 = $('div:visible')

  const q144 = $('#j-test .student')

  const q15 = q144.find('.da')

  const q16 = q144.find('.yo')

  const q17 = q16.next()

  const q18 = q16.prev()

  const q19 = q18.parent()

  const q20 = q3.filter('.da')

  const q21 = q3.filter(function () {
    return this.innerHTML === 'shiguiwu'
  })

  q21.text()
  q21.html()

  q21.css('color', 'red')

  q21.addClass('highlight')

  setTimeout(function () {
    q21.removeClass('highlight')
  }, 5000)

  q21.hide()

  q21.show()

  q21.attr('name')

  q21.attr('bac', 'hah')

  q144.append('<li>周冬秀</li>')

  const liDom = document.createElement('li')
  liDom.id = 'shasd'
  liDom.classList.add('hahaha')
  liDom.innerText = '原生dom对象'

  q144.append(liDom)

  liDom.onclick = function () {
    console.log('hahaa');

  }

  q20.css('background-color', 'red')

  q20.click(function () {

  })

  q21.on('click', function () {

  })



  liDom.addEventListener('change', function () {
    console.log('添加事情方法');
  })
  q21.click(function () {
    console.log('哈哈');

  })

  // alert('shiguiwuaaaa')

  // window.alert('aaaa')

  const a12 = {
    '3name': 'aaa',
    aaa: 34,
    age: 'sds'
  }

  new Promise((res, rej) => {
    // res('hahaha')
    rej('aaaaaaa')
  }).then((data) => {
    console.log('aaaaaaaaaaaaaaaaaaaaaa', data)
  }).catch(data => {
    console.log(data)
  })

  //f(x) = x+y+z

  function a(x) {
    return function (y) {
      return function (z) {
        return x + z + y
      }
    }
  }
  console.log(a(1)(2)(3));

  const proxyObj = (function () {
    return function (value) {

      const funstack = []
      const oproxy = new Proxy({}, {
        get: function (obj, fnName) {
          if (fnName == 'get') {
            funstack.reduce((va, fn) => fn(va), value)
          }
          funstack.push(window[fnName])
          return oproxy
        }
      })

      return oproxy


    }


  }())


  var pipe = (function () {
    return function (value) {
      var funcStack = [];
      var oproxy = new Proxy({}, {
        get: function (pipeObject, fnName) {
          if (fnName === 'get') {
            return funcStack.reduce(function (val, fn) {
              return fn(val);
            }, value);
          }
          funcStack.push(window[fnName]);
          return oproxy;
        }
      });

      return oproxy;
    }
  }());

  const validate = {
    set: function (obj, prop, value) {
      if (prop === 'age') {
        if (!Number.isInteger(value)) {
          throw new TypeError('This age is not an integer')

        }
        if (value > 200) {
          throw new RangeError('dsadsadsadsadsad')
        }
      }
      obj[prop] = value
    }


  }

  const valiObj = new Proxy({}, validate)

  console.log(valiObj.age = 200);

  const target = function () {
    return 'I am th target'
  }

  const h = {
    apply: function () {
      return 'I am the proxy'
    }
  }

  const p11 = new Proxy(target, h)

  function timeout(ms) {
    return new Promise((resolve) => setTimeout(resolve, ms))


  }

  async function asyPrint(value, ms) {
    await timeout(ms)
    console.log(value);


  }

  asyPrint("shiguiwu", 4500)

  const asy111 = async () => {}

  

</script>

</html>
